<template>
  <div class="main_div">
    <div class="content_div">
      <div class="items_div">
        <ViewItem :src="item.img" :label="item.name" :selected="selectId == index" v-for="item, index in terrItem"
          @click="onselect(index)" />
      </div>

      <div class="op_bar" v-if="show_bar">

        <el-checkbox v-model="terr_exagg_en" label="开启地形夸张" size="large" @change="onCheck" />

        <div style="display:flex;">
          <el-slider v-model="terr_exag" size="small" @change="onchange()" :max="10" :min="0"
            />&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ terr_exag
            }}</span>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="js" name="Comp_Terrain">
import { ref, inject, markRaw, onMounted, getCurrentInstance } from 'vue';
import ViewItem from "./others/SubMenu_Item.vue"
let internalInstance = getCurrentInstance();

const terrItem = markRaw(inject("config").terrain);
const nzczm = markRaw(inject("nzczm"));

let show_bar = ref(false);
let selectId = ref(0);
let terr_exagg_en = ref(false);
let terr_exag = ref(1.0);


const onselect = (index) => {

  if (index > 0) {
    show_bar.value = true;
  }
  else {
    show_bar.value = false;
  }

  internalInstance.appContext.config.globalProperties.global_vars.terrain.show_bar = show_bar.value;
  internalInstance.appContext.config.globalProperties.global_vars.terrain.selected_id = index;

  selectId.value = index;

  nzczm.selectTerrain(terrItem[index].type);
}

onMounted(() => {

  show_bar.value = internalInstance.appContext.config.globalProperties.global_vars.terrain.show_bar;
  selectId.value = internalInstance.appContext.config.globalProperties.global_vars.terrain.selected_id;

  terr_exagg_en.value = internalInstance.appContext.config.globalProperties.global_vars.terrain.exaggerate_enable;
  terr_exag.value = internalInstance.appContext.config.globalProperties.global_vars.terrain.exaggerate_value;

})

const onCheck = () => {

  internalInstance.appContext.config.globalProperties.global_vars.terrain.exaggerate_enable = terr_exagg_en.value;

  if (terr_exagg_en.value) {
    nzczm.terrain_exaggerate(terr_exag.value);
  }
  else {
    nzczm.terrain_exaggerate(1.0);
  }
}


const onchange = () => {

  console.log(terr_exag.value);
  
  if (terr_exagg_en.value) {
    nzczm.terrain_exaggerate(terr_exag.value);
    internalInstance.appContext.config.globalProperties.global_vars.terrain.exaggerate_value = terr_exag.value;
  }
}

</script>

<style scoped lang="less">
@import "../assets/css/subview.less";

.items_div {
  display: flex;
  flex-wrap: wrap;
  border: 0px solid #fff;
  justify-content: baseline
}

.op_bar {
  border: 0px solid #fcc;
  box-sizing: border-box;
  flex: 1;
  width: 100%;

  padding: 30px 10px 10px 10px;


}
</style>